<!--
 * @Author: your name
 * @Date: 2022-04-13 15:21:06
 * @LastEditTime: 2022-04-13 21:43:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog-vue3\src\views\blog\column\add-or-update.vue
-->
<template>
    <el-dialog :title="title" custom-class="el-dialog-600" v-model="visible">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
            <el-form-item label="菜单分类" prop="pid">
                <el-select v-model="form.pid" filterable clearable placeholder="请选择分类">
                    <el-option class="option-level0" label="顶级分类" :value="0"></el-option>
                    <el-option
                        v-for="item in tableList"
                        :key="item.id"
                        :class="'option-level' + item.level"
                        :label="item.level != 1 ? '└─' + item.title : item.title"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="栏目标题" prop="title">
                <el-col :span="23">
                    <el-input clearable v-model="form.title" placeholder="请输入栏目标题" />
                </el-col>
            </el-form-item>
            <el-form-item label="栏目名称" prop="name">
                <el-col :span="23">
                    <el-input clearable v-model="form.name" placeholder="请输入栏目名称" />
                </el-col>
            </el-form-item>
            <el-form-item label="路径" prop="path">
                <el-col :span="23">
                    <el-input clearable v-model="form.path" placeholder="请输入栏目路径" />
                </el-col>
            </el-form-item>
            <el-form-item label="关键词" prop="keyword">
                <el-col :span="23">
                    <el-input clearable v-model="form.keyword" placeholder="请输入关键词" />
                </el-col>
            </el-form-item>
            <el-form-item label="描述" prop="desc">
                <el-col :span="23">
                    <el-input type="textarea" v-model="form.desc" placeholder="请输入描述" />
                </el-col>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible = false"> 取 消 </el-button>
            <el-button type="primary" :loading="loading" @click="onSubmit"> 确 定 </el-button>
        </template>
    </el-dialog>
</template>

<script>
import { getCurrentInstance, ref, reactive, watch } from 'vue';
import Options from '@/global/local-data/system';
import { adminCloumn as Api } from 'api';

export default {
    props: {
        tableList: {
            type: Array
        }
    },
    setup() {
        const { proxy } = getCurrentInstance();

        let tableType = ref(null); // 表单类型
        let id = ref(null);
        let loading = ref(false); //等待按钮
        let visible = ref(false); //弹窗开关
        let title = ref(null); // 标题
        // 显示选项
        let displayRadio = Options.menu.displayRadio;
        // 表单
        let form = reactive({
            pid: '',
            title: '',
            name: '',
            path: '',
            keyword: '',
            desc: ''
        });
        // 验证
        let rules = {
            pid: [{ required: true, message: '请选择分类', trigger: 'change' }],
            title: [
                { required: true, message: '请输入栏目标题', trigger: 'change' },
                { min: 2, max: 10, message: '字符长度2到10个字符', trigger: 'change' }
            ],
            name: [
                { required: true, message: '请输入栏目名称', trigger: 'change' },
                { min: 2, max: 100, message: '字符长度2到100个字符', trigger: 'change' }
            ],
            path: [{ required: true, message: '请输入栏目路径', trigger: 'change' }]
        };

        // 初始化
        const init = () => {
            title.value = tableType.value == 'edit' ? '编辑' : '新增';

            tableType.value == 'edit' ? getById() : (form.pid = id.value);
        };
        // 获取详情
        const getById = async () => {
            const { code, msg, data } = await proxy.$http.get(Api.getById, {
                params: { id: id.value }
            });

            if (code === 200) {
                form.pid = data.pid;
                form.title = data.title;
                form.name = data.name;
                form.path = data.path;
                form.keyword = data.keyword;
                form.desc = data.desc;
            }
        };
        // 提交表单
        const onSubmit = async () => {
            await proxy.$refs['formRef'].validate((valid) => {
                if (valid) loading.value = true;
            });

            if (loading.value) {
                let api = Api.add;
                let params = {
                    pid: form.pid,
                    title: form.title,
                    name: form.name,
                    path: form.path,
                    keyword: form.keyword,
                    desc: form.desc
                };

                if (tableType.value === 'edit') {
                    api = Api.update;
                    params.id = id.value;
                }

                const { code, msg, data } = await proxy.$http.post(api, params);

                if (code === 200) {
                    proxy.$msg.success(msg);
                    proxy.$parent.getList();
                    visible.value = false;
                } else {
                    proxy.$msg.error(msg ? msg : data);
                }

                loading.value = false;
            }
        };

        // 监听弹窗开关
        watch(visible, (newVal, oldVal) => {
            newVal ? init() : proxy.$refs['formRef'].resetFields();
        });

        return {
            id,
            loading,
            visible,
            title,
            tableType,
            displayRadio,
            form,
            rules,
            onSubmit
        };
    }
};
</script>
